<template>
  <div class="body">
    <div class="order-box">
      <div class="order-index_title">
        <b>确认订单信息</b>
        <br /><br />
        请在
        <span class="t" style="color: red;font-family: San Francisco UI;font-size: 18px;font-weight: 600;">{{minutes+":"+seconds}}</span>
        分钟内完成支付！超出可能导致购买失败，需重新下单
      </div>
      <div class="order-index_body">
        <div id="j-order-telInfo" class="order-item">
          <div class="order-tel-info">
            <div class="title f-f0">购买账户</div>
            <div class="user">
              <img :src="customer.avatar" :alt="customer.name" />
              <div class="user_right">
                <p :id="'auto-id-'+order.memberId" v-text="order.nickname"/>
                <label v-text="'手机号码：'+order.mobile"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="order-body-title f-f0 order-item" :id="'auto-id-'+order.memberId">
        购买商品
      </div>
      <div id="j-order-body" class="order-item">
        <div class="um-order-order-wrap z-ordertype-301">
          <div class="um-order-order-wrap_course">
            <div class="um-order-course">
              <div class="um-order-course-box">
                <div class="um-order-course_clist">
                  <div class="um-order-course_row f-cb">
                    <div class="f-fl um-order-course_name" style="width: 80%">
                      <div class="um-order-course_cell">
                        <div class="um-order-course_cell_image f-ib f-vat">
                          <a
                            :href="'/course/'+order.courseId"
                            target="_blank"
                            class="f-db"
                          >
                            <img
                              class="um-order-course_img"
                              :src="order.courseCover"
                              :alt="order.courseTitle"
                            />
                          </a>
                        </div>
                        <div class="um-order-course_names f-ib f-vat">
                          <a
                            :href="'/course/'+order.courseId"
                            target="_blank"
                            class="f-db"
                          >
                            <h5 class="um-order-course_cname">
                              <span v-text="order.courseTitle"
                                ></span
                              >
                            </h5>
                          </a>
                          <span class="um-order-course_tname"></span>
                        </div>
                      </div>
                    </div>
                    <div class="f-fl um-order-course_price" style="width: 20%">
                      <!--Regular if42-->
                      <div class="um-order-course_cell" v-if="order.totalFee != 0">
                        <b v-text="order.totalFee"/>
                      </div>
                      <div class="um-order-course_cell" v-if="order.totalFee == 0">
                        <b>免费</b>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="um-order-course_total">
                <!--Regular if45-->
                <div class="um-order-course_total_price f-f0 f-fs0 f-fc3">
                  总计：<b v-text="'￥'+order.totalFee"/>
                </div>
              </div>
            </div>
          </div>
          <div>
            <!--inlcude-->
            <div class="um-pay-method-wrap">
              <div class="g-flow">
                <p class="um-pay-method-wrap_title">支付方式</p>

                <div class="um-pay-method-wrap_container">
                  <ul class="um-pay-method-wrap_paylist f-cb">
                    <el-radio v-model="payType" label="1">
                      <svg style="transform:translate(-30%, 30%);margin-left:20px;" t="1656219664800" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3717" width="32" height="32"><path d="M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z" fill="#09BB07" p-id="3718"></path></svg>
                      <span>微信支付</span>
                    </el-radio>
                    <br>
                    <el-radio v-model="payType" label="2">
                      <svg style="transform:translate(-30%, 30%);margin-left:20px;" t="1656219384210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2210" width="32" height="32"><path d="M902.095 652.871l-250.96-84.392s19.287-28.87 39.874-85.472c20.59-56.606 23.539-87.689 23.539-87.689l-162.454-1.339v-55.487l196.739-1.387v-39.227H552.055v-89.29h-96.358v89.294H272.133v39.227l183.564-1.304v59.513h-147.24v31.079h303.064s-3.337 25.223-14.955 56.606c-11.615 31.38-23.58 58.862-23.58 58.862s-142.3-49.804-217.285-49.804c-74.985 0-166.182 30.123-175.024 117.55-8.8 87.383 42.481 134.716 114.728 152.139 72.256 17.513 138.962-0.173 197.04-28.607 58.087-28.391 115.081-92.933 115.081-92.933l292.486 142.041c-11.932 69.3-72.067 119.914-142.387 119.844H266.37c-79.714 0.078-144.392-64.483-144.466-144.194V266.374c-0.074-79.72 64.493-144.399 144.205-144.47h491.519c79.714-0.073 144.396 64.49 144.466 144.203v386.764z m-365.76-48.895s-91.302 115.262-198.879 115.262c-107.623 0-130.218-54.767-130.218-94.155 0-39.34 22.373-82.144 113.943-88.333 91.519-6.18 215.2 67.226 215.2 67.226h-0.047z" fill="#02A9F1" p-id="2211"></path></svg>
                      <span>支付宝</span>
                    </el-radio>
                    
                    <!--Regular if53-->
                  </ul>
                  <!--Regular if54-->
                </div>
                <div class="um-pay-method-wrap_bottombtn f-pr">
                  <div class="um-pay-method-wrap_realpay">
                    <span>
                      实付金额：<span class="um-pay-method-wrap_sum" v-text="'￥'+order.totalFee"/>
                    </span>
                  </div>
                  <div class="um-pay-method-wrap_protocal">
                    <div class="um-pay-agreement">
                      <label class="ux-check" title="">
                        <el-checkbox v-model="agree"/>
                        <span></span>
                      </label>
                      <span class="um-pay-agreement_text">
                        <span>我已同意</span><a @click.stop="alert()">《谷粒学院用户付费协议》</a>
                      </span>
                    </div>
                  </div>
                  <!-- <div>立即支付</div> -->
                  <el-button :disabled="!agree" type="success" round style="width:160px;height: 40px;font-size: 16px;margin-top: 10px;" @click="pay">立即支付</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import '~/assets/css/order.css'
  import cookie from "js-cookie"
  import order from '@/api/order'

export default {
  layout: "order",
  data() {
    return {
      customer: {
        nickname: "",
        mobile: ""
      },
      orderNo: '',
      agree: false,
      payType: '1',
      order: {
        courseCover: "",
        courseId: "",
        courseTitle: "",
        teacherName: "",
        totalFee: 0
      },
      countdown: 0,
      minutes: 0,
      seconds: 0
    };
  },
  created() {
    this.init()
  },
  methods: {
    getOrderInfo() {
      order.getOrderInfo(this.orderNo)
        .then((result) => {
          this.order = result.data.data.jsonStr
          this.countdown = Number(result.data.data.time)
          let count = setInterval(() => {
          --this.countdown;
          if (this.countdown < 1) {
            clearInterval(count);
            this.seconds = 0
            this.minutes = 0
          } else {
            this.seconds = this.countdown % 60
            if (this.seconds < 10) {
              this.seconds = '0'+this.seconds
            }
            this.minutes = Math.floor(this.countdown / 60)
          }
        }, 1000)
        })
    },
    getLoginInfo() {
      this.token = cookie.get("user_token");
      const jsonStr = cookie.get("user_ucenter");
      if (jsonStr) {
        this.customer = JSON.parse(jsonStr);
      } else {
        this.$message.error('请登录后下单！')
        setTimeout(() => {
          this.$router.push( {path: '/sign'} )
        },3000)
      }
    },
    init () {
      // this.orderVo.courseId = this.$route.params.id
      // this.orderVo.courseCover = this.$route.query.cover
      // this.orderVo.courseTitle = this.$route.query.courseName
      // this.orderVo.totalFee = this.$route.query.coursePrice
      // this.orderVo.teacherName = this.$route.query.teacherName
      this.orderNo = this.$route.params.id
      this.getOrderInfo(),
      this.getLoginInfo(),
      this.connectWebsocket()
    },
    pay() {
      order.pay(this.payType,this.orderNo)
        .then(resp => {
          if (resp.data.success) {
            const div = document.createElement('divPay');
            div.innerHTML = resp.data.data.form
            document.body.appendChild(div)
            document.forms[0].setAttribute('target', '_blank')
            document.forms[0].submit();
          } else {
            // this.$message.error("订单已过期请重新下单！")
          }
        })
    },
    connectWebsocket() {
      let websocket;
      if (typeof WebSocket === "undefined") {
        console.log("您的浏览器不支持WebSocket")
        return
      } else {
        let protocol = "ws"
        let url = ""
        if (window.location.protocol == "https:") {
          protocol = "wss"
        }
        // `${protocol}://window.location.host/echo`;
        url = `${protocol}://localhost:8007/serviceorder/bindingRecord`

        // 打开一个websocket
        websocket = new WebSocket(url)
        // 建立连接
        websocket.onopen = () => {
          // 发送数据
          websocket.send("发送数据");
          console.log("websocket发送数据中")
        }
        // 客户端接收服务端返回的数据
        websocket.onmessage = evt => {
          console.log("websocket返回的数据：", evt)
          console.log(evt.data)
          const result = JSON.parse(evt.data)
          if (result.success) {
            this.$notify({
              message: result.message,
              offset: 100,
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push( {path: '/course/'+this.order.courseId } )
            },3000)
          } else {
            this.$notify.error({
              message: '支付失败！',
              offset: 100
            })
          }
        }
        // 发生错误时
        websocket.onerror = evt => {
          console.log("websocket错误：", evt)
        }
        // 关闭连接
        websocket.onclose = evt => {
          console.log("websocket关闭：", evt)
        }
      }
    }
  },
};
</script>
